<template>
  <div class="page dialog-page">
    <div class="test">
      <app-modal>
        <div class="ui-center ui-bold">专业课成绩</div>
        <div style="padding: 20rpx">这是 content</div>
        <div style="height: 40rpx"></div>
      </app-modal>
    </div>
    <div style="height: 20rpx"></div>
    <div>
      <div class="ui-flex ui-justify-center">
        <van-button @tap="openModal">open modal</van-button>
      </div>
      <van-overlay :show="testModalOverlay" @click="onClickTestOverlayHide">
        <div class="test" style="height: 100%">
          <app-modal>
            <div class="ui-center ui-bold">专业课成绩</div>
            <div style="padding: 20rpx">这是 content</div>
            <div style="height: 40rpx"></div>
          </app-modal>
        </div>
      </van-overlay>
    </div>
  </div>
</template>

<script>
let overlayBehavirors = Behavior({
  data: {
    testModalOverlay: false
  },
  methods: {
    openModal() {
      console.log('model')
      this.setData({
        testModalOverlay: true
      })
    },
    onClickTestOverlayHide() {
      this.setData({
        testModalOverlay: false
      })
    }
  },
})

export default {
  behaviors: [
    overlayBehavirors
  ],
  data() {
    return {
    }
  },
  onLoad() {
  },
  onShow() {
  },
  methods: {
  },
}
</script>

<style lang="scss">
@import "../../app.component.scss";
page {
  height: 100%;
}

.page {
  background-color: #efefef;
  height: 100%;
}

.test {
  display: grid;
  place-items: center;
}
</style>
